<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root {
        --red: 255;
        --green: 255;
        --blue: 255;
        --threshold: 0.5;
    }

    .box {
        overflow: hidden;
    }

    #div {
        width: 495px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        border: 1px solid #cccccc;
        background-color: rgb(var(--red), var(--green), var(--blue));
        --r: calc(var(--red) * 0.2126);
        --g: calc(var(--green) * 0.7152);
        --b: calc(var(--blue) * 0.0722);
        --sum: calc(var(--r) + var(--g) + var(--b));
        --lightness: calc(var(--sum) / 255);

        color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -99999%));
    }

    p {
        float: left;
        margin-right: 20px;
    }
</style>

<body>
    <div class="box">
        <div id="div">
        </div>
        <p style="color: red; font-weight: 700;">R: <input type="range" min="0" max="255" value="255" name="red"
                id="red"></p>
        <p style="color: green; font-weight: 700;">G: <input type="range" min="0" max="255" value="255" name="green"
                id="green"></p>
        <p style="color: blue; font-weight: 700;">B: <input type="range" min="0" max="255" value="255" name="blue"
                id="blue"></p>
    </div>
    <script>
        var div = document.getElementById('div');
        var red = document.getElementById('red').value;
        var green = document.getElementById('green').value;
        var blue = document.getElementById('blue').value;
        div.innerHTML = "rgb(" + red + "," + green + "," + blue + ")";
        var colors = document.querySelectorAll('input');
        console.log(colors);
        colors.forEach(function (e) {
            e.addEventListener('input', function () {
                var red = document.getElementById('red').value;
                var green = document.getElementById('green').value;
                var blue = document.getElementById('blue').value;
                div.style.background = "rgb(" + red + "," + green + "," + blue + ")";
                div.innerHTML = "rgb(" + red + "," + green + "," + blue + ")";
                // var div = document.getElementById('div')
                div.style.setProperty('--' + this.name, this.value)
            })
        })
    </script>
</body>

</html>